<template>
	<div class="card-container">
		<el-table
			:data="
				ProblemTable.slice(
					(currentPage - 1) * pagesize,
					currentPage * pagesize
				)
			"
			stripe
			style="width: 100%; font-size: 20px"
			size="large"
		>
			<el-table-column prop="pid" label="#" width="180" />
			<el-table-column prop="pName" label="题目" width="180">
				<template v-slot="scope">
					<router-link
						:to="{
							path: '/ProblemDetail',
							query: { pid: scope.row.pid, cid: cidId },
						}"
						>{{ scope.row.pName }}</router-link
					>
				</template>
			</el-table-column>
			<el-table-column prop="submitTimes" label="提交次数" width="180" />
			<el-table-column prop="acTimes" label="通过次数" width="180" />
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="ProblemTable.length"
		/>
	</div>
</template>

<script>
	import api from '../api/api.js';

	// 分页处理的逻辑：前端存储st, axios传输给后端，后端返回对应的min(10, st + 10 - 1)的数据,然后放到数组中去, 前端v-for渲染
	// 根据cid 判断需要加载的pid数组
	export default {
		name: 'Problem',
		data() {
			return {
				ProblemTable: [
					// {
					/*pid: '',
          pName: '',
          submitTimes: '',
          acTimes: ''*/
					// },
				],
				index: 1,
				currentPage: 1, // 初始页
				pagesize: 5, // 每页的数据
			};
		},
		created() {
			this.handleProblemTable();
		},
		mounted() {},
		methods: {
			// 初始页currentPage, 初始每页数据数pagesize 和 数据data  (为了方便就不使用数据库limit进行处理了)
			handleSizeChange(size) {
				console.log(size, 'size');
				this.pagesize = size;
				console.log(this.pagesize); // 每页下拉显示数据
			},
			handleCurrentChange(currentPage) {
				console.log(currentPage, 'currentPage');
				this.currentPage = currentPage;
				console.log(this.currentPage); //点击第几页
			},
			handleProblemTable() {
				// 直接从题库页面进入
				if (this.cidId == '-1') {
					api.GetProblemsList(null).then((res) => {
						if (res && res.data) {
							/*                 console.log(res.data.length);
                                       console.log(res.data);*/
							for (var i = 0; i < res.data.length; i++) {
								this.ProblemTable.push({
									pid: res.data[i].pid,
									pName: res.data[i].pName,
									submitTimes: res.data[i].submitTimes,
									acTimes: res.data[i].acTimes,
								});
							}
						}
					});
				} // 从比赛页面进入
				else {
					api.GetCidCompetitionProblem({ cid: this.cidId }).then(
						(res) => {
							if (res && res.data) {
								for (var i = 0; i < res.data.length; i++) {
									this.ProblemTable.push({
										pid: res.data[i].pid,
										pName: res.data[i].pName,
										submitTimes: res.data[i].submitTimes,
										acTimes: res.data[i].acTimes,
									});
								}
							}
						}
					);
				}
			},
		},
		props: {
			cidId: {
				type: String,
				required: false, // 标记是否从比赛页面跳转过来的题目,如果是的话后续传参需要插入到比赛的Status
				default: '-1',
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '../_utility.scss';
	.card-container {
		@include basic-card;
		margin-top: 20px;
	}

	.el-pagination:deep {
		margin-top: 20px;
	}

	.el-pagination:deep .el-pager .number {
		font-size: 20px;
	}
</style>
